<template>
    <div class="box-wrap weibo_binding">
      <div class="" v-show="begin">
        <div class="before-begin">
          <div class="weibo-logo">
            <img src="../../../../../assets/img/weibo.png" alt=""/>
            <span>
              <p v-html="$t('config.channel.weiboWarnText')"></p>
            </span>
          </div>
          <p>{{$t('config.channel.weiboAuthentication')}}</p>
          <el-button type="primary" class="primary_btn" @click="goNextStep('step1')">{{$t('config.channel.bindingWeiboCustom')}}</el-button>
        </div>
        <search
                :loading="tableLoading"
                @refresh="refresh"
                @turnPage="turnPage"
                :currentPage="currentPage"
                :count="count"
                :pageSize="10"
                :isShowInput = 'false'
                :isReloadIvr="false"
                :showAdvSearch="false"
                :showAdd = "false"
        >
        </search>
        <weibo-table class="weibo-table" :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="deleteWeibo" @resh ='queryList' :loading="tableLoading"></weibo-table>
      </div>
      <div class="step1" v-show="step1">
          <img class="step-img" src="../../../../../assets/img/weiboStep1_zh.png" alt=""/>
          <p class="title-center">{{$t('config.channel.addWeiboCustom')}}</p>
          <div class="form1-wrap">
              <el-form :model="roleForm1" :rules="rules1" ref="roleForm1" label-width="100px">
                  <el-form-item :label="$t('config.channel.addWeiboName')" prop="weiboName">
                      <el-input size="mini" v-model.trim="roleForm1.weiboName" auto-complete="off"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('config.channel.addWeiboId')" prop="weiboId">
                      <el-input size="mini" v-model.trim="roleForm1.weiboId" auto-complete="off"></el-input>
                  </el-form-item>
              </el-form>
          </div>
          <p class="img-text">{{$t('config.channel.copyIdToInput')}}</p>
          <img class='copy-img' src="../../../../../assets/img/weiboCopy1_zh.png" alt=""/>
          <el-button class="primary_btn" @click.stop="backPreviousStep('begin')">{{$t('public.cancel')}}</el-button>
          <el-button class="primary_btn" type="primary" @click.stop="goNextStep('step2', 'roleForm1')">{{$t('config.channel.nextStep')}}</el-button>
      </div>
      <div class="step2" v-show="step2">
          <img class="step-img" src="../../../../../assets/img/weiboStep2_zh.png" alt=""/>
          <p class="title-center">{{$t('config.channel.interfaceGeneration')}}</p>
          <div class="form-wrap"><span>URL:</span><el-input size="mini" v-model.trim="appUrl" id="weibo_config_url" :disabled="true"></el-input><span class="copy" @click.stop="copyWeiboUrlOrAppkeyText('weibo_config_url')">复制</span></div>
          <div class="form-wrap"><span>APPKEY:</span><el-input size="mini" v-model.trim="appkey" id="weibo_config_appkey" :disabled="true"></el-input><span class="copy" @click.stop="copyWeiboUrlOrAppkeyText('weibo_config_appkey')">复制</span></div>
          <p class="img-text">{{$t('config.channel.openWeiboUcenter')}}</p>
          <img class='copy-img' src="../../../../../assets/img/weiboCopy2_zh.png" alt=""/>
          <el-button type="primary" class="primary_btn" @click.stop="backPreviousStep('step1')">{{$t('config.channel.prevStep')}}</el-button>
          <el-button type="primary" class="primary_btn" @click.stop="goNextStep('step3')">{{$t('config.channel.nextStep')}}</el-button>
      </div>
      <div class="step3" v-show="step3">
          <img class="step-img" src="../../../../../assets/img/weiboStep3_zh.png" alt=""/>
          <p class="title-center">{{$t('config.channel.enterAccessToken')}}</p>
          <div class="form2-wrap">
              <el-form :model="roleForm2" :rules="rules2" ref="roleForm2" label-width="130px">
                  <el-form-item :label="$t('config.channel.enterAccessToken2')" prop="accessToken">
                      <el-input size="mini"  v-model.trim="roleForm2.accessToken" auto-complete="off"></el-input>
                  </el-form-item>
              </el-form>
          </div>
          <p class="img-text">{{$t('config.channel.copyImgToInput')}}</p>
          <img class='copy-img' src="../../../../../assets/img/weiboCopy3_zh.png" alt=""/>
          <el-button type="primary" class="primary_btn" @click.stop="backPreviousStep('step2')">{{$t('config.channel.prevStep')}}</el-button>
          <el-button type="primary" class="primary_btn" @click.stop="goNextStep('step4', 'roleForm2')">{{$t('config.channel.nextStep')}}</el-button>
      </div>
      <div class="step4" v-show="step4">
          <img class="step-img" src="../../../../../assets/img/weiboStep4_zh.png" alt=""/>
          <p class="title-center">{{$t('config.channel.weiboCustomConfig')}}</p>
          <div class="form3-wrap">
            <el-form :model="roleForm3" ref="roleForm3" label-width="160px">
              <el-form-item label="是否启用日程" prop="scheduleEnable" v-show="configType === 'config'">
                <el-radio-group v-model.trim="roleForm3.scheduleEnable">
                  <el-radio :label="true">启用</el-radio>
                  <el-radio :label="false">不启用</el-radio>
                </el-radio-group>
                <p class="remark">温馨提示：请确保您已配置相关日程，否则将无法正常启用。您可以到“日程管理”下面配置相应日程。</p>
              </el-form-item>
              <el-form-item v-show="!roleForm3.scheduleEnable" :label="$t('config.channel.msgToPeer')" prop="toPeer">
                <el-select size="mini" v-model="roleForm3.toPeer" :placeholder="$t('public.pleasePick')" >
                  <el-option
                    v-for="item in peerOptions"
                    :key="item._id"
                    :label="item.DisplayName"
                    :value="item.Exten">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-show="!roleForm3.scheduleEnable" :label="$t('config.channel.isUseRobt')" prop="robot">
                <el-select size="mini" v-model="roleForm3.robot" :placeholder="$t('public.pleasePick')" @visible-change="robotSelectShow">
                  <el-option value="">{{$t('public.pleasePick')}}</el-option>
                  <el-option
                    v-for="item in allrobotOptions"
                    :key="item._id"
                    :label="item.robot_name_new"
                    :disabled="item.disabled"
                    :value="item._id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-show="!roleForm3.scheduleEnable && aiRobots.length > 0"  label="机器人辅助座席:" prop="robotAssistId">
                <el-select size="mini" v-model.trim="roleForm3.robotAssistId" :placeholder="$t('public.pleasePick')" @visible-change="robotSelectShow">
                  <el-option value="">{{$t('public.pleasePick')}}</el-option>
                  <el-option
                    v-for="item in aiRobots"
                    :key="item._id"
                    :label="item.robot_name_new"
                    :disabled="item.disabled"
                    :value="item._id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否开启触发词命中转人工:" prop="scheduleEnable" v-show="configType === 'config'">
                <el-radio-group v-model.trim="roleForm3.openTriggerWord">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
                <question-tooltip
                        :tipContent="'开启后，访客发送的消息匹配到转人工触发词后，将自动转接人工客服，提高接待效率'"
                        class="weiboTooltip">
                </question-tooltip>
              </el-form-item>
              <el-form-item :label="$t('config.channel.userPeopleWord')" prop="convertWords">
                <el-input size="mini" v-model.trim="roleForm3.convertWords" placeholder="例如:人工,转人工,rg"></el-input>
                <question-tooltip
                        :tipContent="'1，可设置多个，多个触发词用英文逗号隔开。<br/>2，需要全部命中触发词，如：触发词为“转人工”则必须输入“转人工”才能转入人工。'"
                        class="weiboTooltip">
                </question-tooltip>
              </el-form-item>
              <el-form-item v-show="!roleForm3.scheduleEnable" :label="$t('config.channel.sendWelcomeMsg')" prop="welcomePushTime">
                <el-radio-group v-model="roleForm3.welcomePushTime" @change="pushTimeChange">
                  <el-radio class="radio" label="access">{{$t('config.channel.enterSystem')}}</el-radio>
                  <el-radio class="radio welcome-radio" label="claim">{{$t('config.channel.collectSeats')}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-show="!roleForm3.scheduleEnable" :label="$t('config.channel.welcomeMsg')" prop="welcomeMsg">
                <span class="remark">点击“+”即可将占位符填充到您输入内容的后方。</span>
                <question-tooltip
                  class="weiboTooltip"
                  :direction="'bottom'"
                  :tipContent="'占位符是指系统自动获取的客户和座席相关信息，可用于配制组合欢迎语内容，如：亲爱的{nickName}您好，其中{nickName}为获取到的访客名称。</br>注意：获取的信息为您接入网站代码时定义的相关信息，如需使用占位符，请先在接入网站时接入相关代码。座席工号和座席名称只有在座席领取后推送欢迎语才会有效'">
                </question-tooltip>
                <div class="placeholder_box">
                  <dl v-for="place in placeholderArr" @click="addPlaceholder(place.data)" :title="place.content">
                    {{place.content}}
                    <i class="iconfont icon-zhankai"></i>
                  </dl>
                </div>
                <el-input size="mini" type="textarea" v-model="roleForm3.welcomeMsg"></el-input>
              </el-form-item>
              <el-form-item :label="$t('config.channel.isUseSatisfaction')" prop="csr">
                <el-radio class="radio" v-model="roleForm3.csr" label="1">{{$t('config.channel.notEnabled')}}</el-radio>
                <el-radio class="radio statis-radio" v-model="roleForm3.csr" label="2">{{$t('config.channel.enabled')}}</el-radio>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="primary_btn" @click.stop="backPreviousStep('step3')">{{$t('config.channel.prevStep')}}</el-button>
                <el-button type="primary" class="primary_btn" @click.stop="goNextStep('step5','roleForm3')">{{$t('public.save')}}</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
      <div class="step5" v-if="isShowDetail">
        <breadCrumb v-show="isShowDetail" :titleArr="titleArr" @back="cancle"></breadCrumb>
        <weibo-detail :weiboDetail="weiboDetail" :peerOptions="peerOptions" @cancle="cancle" @refresh="refresh"></weibo-detail>
      </div>
    </div>
</template>
<script>
    import questionTooltip from '@/components/ui-modules/questionToolTip/QuestionToolTip.vue'
    import Clipboard from 'clipboard-js'
    import search from '../base/search'
    import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
    import WeiboTable from './WeiboTable.vue'
    import WeiboDetail from './WeiboDetail.vue'
    import { getCacheByKey, deepClone } from '@/utils/m7Utils.js'
    export default {
      name: 'WeiboBinding',
      data () {
        let checkWeiboId = (rule, value, callback) => {
          if (!value) {
            return callback(new Error(this.$t('config.channel.emptyWeiboId')))
          }
          setTimeout(() => {
            if (!/^[1-9]\d*$/.test(value)) {
              callback(new Error(this.$t('config.channel.weiboIdMustNumber')))
            } else {
              callback()
            }
          }, 100)
        }
        return {
          currentPage: 1,    //   当前页
          count: 0, // 总条数
          tableHeader: [
            {prop: 'name', label: this.$t('config.channel.weiboName')},
            {prop: 'to_peer', label: this.$t('public.queues')},
            {prop: 'status', label: this.$t('public.state')},
            {prop: 'lastUpdateTime', label: this.$t('config.channel.lastUpdateTime')},
            {prop: '', label: this.$t('sms.operate')}
          ],                        //   自定义 表头
          tableData: [],           //  表格数据
          tableLoading: false,     //   表格  loading
          isShowDetail: false,  // 是否要展示右边
          weiboDetail: {},  // 微博账号详情
          showDeleteWeioboModal: false, // 删除微博的窗口
          titleArr: [this.$t('config.channel.weiboManagement'), this.$t('config.channel.changeWeiboCutom')],
          changeWeiboList: 0,
          roleForm1: {
            weiboName: '',
            weiboId: ''
          },
          rules1: {
            weiboName: [
              { required: true, message: this.$t('validate.required'), trigger: 'blur' }
            ],
            weiboId: [
              { required: true, validator: checkWeiboId, trigger: 'blur' }
            ]
          },
          roleForm2: {
            accessToken: ''
          },
          rules2: {
            accessToken: [
              { required: true, message: this.$t('validate.required'), trigger: 'blur' }
            ]
          },
          roleForm3: {
            toPeer: '',
            robot: '',
            convertWords: '',
            welcomeMsg: '',
            csr: '1',
            welcomePushTime: 'access',
            scheduleEnable: false,
            openTriggerWord: true,
            robotAssistId: ''
          },
          placeholderArr: [
            {
                content: this.$t('configLazyLoad.channel.nickName'),
                data: 'nickName'
              }
          ],
          appUrl: '',
          appkey: '',
          peerOptions: [],
          aiRobots: [],
          allrobotOptions: [],
          begin: true,
          step1: false,
          step2: false,
          step3: false,
          step4: false
        }
      },
      components: {
        questionTooltip,
        search,
        breadCrumb,
        WeiboTable,
        WeiboDetail
      },
      computed: {
        configType () {
          let paths = this.$route.path.split('/')
          return paths[2]
        }
      },
      methods: {
        robotSelectShow (show) {
          if (show) {
            this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
              if (res2 && res2.success && res2.data && res2.data.length > 0) {
                let aiRobot = res2.data
                let allRobot = this.allrobotOptions
                aiRobot.forEach((item1) => {
                  item1._id = item1.Id
                  item1.robot_name_new = item1.Nick
                  let exist = allRobot.findIndex((all) => {
                    return all.Id === item1.Id
                  })
                  if (exist === undefined) {
                    allRobot.push(item1)
                  } else {
                    allRobot.splice(exist, 1, item1)
                  }
                })
                this.aiRobots = aiRobot
                this.allrobotOptions = allRobot
              }
            })
          }
        },
        goNextStep (step, formName) {
          if (step === 'step1') { // 初始化到第一步
            this.begin = false
            this.step1 = true
          } else if (step === 'step2') { // 第一步到第二步
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let lastData = {'name': this.roleForm1.weiboName, 'weiboId': this.roleForm1.weiboId}
                this.$store.dispatch('getWeiboUrlAndAppkey', lastData).then((req) => { // 获取url 和appKey
                  this.appUrl = req.appUrl + this.roleForm1.weiboId
                  this.appkey = req.appKey
                  this.step1 = false
                  this.step2 = true
                })
              } else {
                return false
              }
            })
          } else if (step === 'step3') { // 第二步到第三步
            this.step2 = false
            this.step3 = true
          } else if (step === 'step4') { // 第三步到第四步
            this.$refs[formName].validate((valid) => {
              if (valid) {
                if (this.peerOptions.length <= 0 || this.allrobotOptions.length <= 0) { // 第一次点击请求
                  this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
                    let mailQueues = this.$getCache('mailQueues')
                    if (!mailQueues || mailQueues.length === 0) {
    //                    按照老版没有技能组时应该跳转到添加技能组页 暂不处理
                      this.$message('您还没设置技能组，请先到【渠道技能组】添加技能组!')
                      return
                    }
                    this.peerOptions = mailQueues || []
                    this.step3 = false
                    this.step4 = true
                  })
                  this.$store.dispatch('getCache', { type: 'robotConfig' }).then(req => {
                    let robotConfig = this.$getCache('robotConfig')
                    this.allrobotOptions = robotConfig || []
                  })
                } else { // 之前已经请求过了
                  this.step3 = false
                  this.step4 = true
                }
              } else {
                return false
              }
            })
          } else if (step === 'step5') { // 保存
            let self = this
            this.$refs[formName].validate((valid) => {
              if (valid) {
                let data = {}
                data.to_peer = self.roleForm3.toPeer
                data.scheduleEnable = self.roleForm3.scheduleEnable
                if (!data.scheduleEnable) {
                  if (!data.to_peer) {
                    this.$message.error('请选择技能组')
                    return
                  }
                }
                data.robot = ''
                if (self.roleForm3.robot) {
                  data.robot = self.roleForm3.robot
                }
                data.convert_words = self.roleForm3.convertWords
                data.welcome_msg = self.roleForm3.welcomeMsg
                data.welcomePushTime = self.roleForm3.welcomePushTime
                data.webchat_csr = true
                if (self.roleForm3.csr === '1') {
                  data.webchat_csr = false
                }
                data.name = self.roleForm1.weiboName
                data.weiboId = self.roleForm1.weiboId
                data._id = self.roleForm1.weiboId
                data.appUrl = self.appUrl
                data.appKey = self.appkey
                data.access_token = self.roleForm2.accessToken
                data.account = self.$store.state.session.user.account
                data.robotAssistId = self.roleForm3.robotAssistId
                data.openTriggerWord = self.roleForm3.openTriggerWord
                if (!data.robot) {
                  data.robotType = ''
                } else {
                  this.allrobotOptions.forEach((item) => {
                    if (item._id === data.robot) {
                      if (item.Nick) {
                        data.robotType = item.robotType
                      } else {
                        data.robotType = item.robot_type_new
                      }
                    }
                  })
                }
  //          机器人辅助座席，增加assistRobotType参数
                this.aiRobots.map((item) => {
                  if (data.robotAssistId === item._id) {
                    if (data.robotAssistId !== '') {
                      this.$set(data, 'assistRobotType', item.robotType)
                    } else {
                      this.$set(data, 'assistRobotType', '')
                    }
                  }
                })
                data.accessId = data.weiboId
                data.platform = 'weibo'
                this.$store.dispatch('saveBindWeiboDetail', data).then((resp) => { // 获取url 和appKey
                  if (resp.success) {
                    this.$message.success(this.$t('config.channel.bindingWeiboSuccess'))
                    this.$emit('changeToDetail') // 成功之后界面跳转管理界面
                    // this.$emit('toChangeWeiboList', true) // 成功之后刷新微博列表数据
                    this.toChangeWeiboList(true)
                    this.roleForm1 = {weiboName: '', weiboId: ''}
                    this.roleForm2 = {accessToken: ''}
                    this.roleForm3 = {toPeer: '', robot: '', convertWords: '', welcomeMsg: '', csr: '1', welcomePushTime: 'access'}
                    // 添加成功之后，所有表单还要清空
                    this.step4 = false // 隐藏最后一次操作界面
                    this.backPreviousStep('begin') // 绑定界面变回初始化
                  } else {
                    // this.$emit('toChangeWeiboList', false) // 失败不刷新微博列表数据
                    this.toChangeWeiboList(false)
                    this.$message.error(resp.message)
                  }
                })
              } else {
                return false
              }
            })
          }
        },
        backPreviousStep (step) {
          if (step === 'begin') { // 第一步返回初始化
            this.begin = true
            this.step1 = false
          } else if (step === 'step1') { // 第二步返回第一步
            this.step1 = true
            this.step2 = false
          } else if (step === 'step2') { // 第三步返回第二步
            this.step2 = true
            this.step3 = false
          } else if (step === 'step3') { // 第四步返回第三步
            this.step3 = true
            this.step4 = false
          } else if (step === 'isShowDetail') {
            this.begin = false
            this.isShowDetail = true
          }
        },
        copyWeiboUrlOrAppkeyText (elementId) {
          // 获取复制内容
          let content = document.getElementById(elementId)
          if (content) {
            if (content) {
              let self = this
              Clipboard.copy(content.value).then(
                function () {
                  self.$message.success(self.$t('config.business.copySuccess'))
                }
              )
            }
          }
        },
        addPlaceholder (msg) {
          this.roleForm3.welcomeMsg += '{' + msg + '}'
        },
        queryList () { // 获取微博列表
          let data = {
            page: this.currentPage,
            pageSize: 10
          }
          this.tableLoading = true
          this.$store.dispatch('queryWeiboList', data).then(resp => {
            this.isShowDetail = false // 刷新列表的时候要关闭详情页
            this.tableLoading = false
            if (resp.success) {
              let weiboList = resp.list
              for (let i = 0; i < weiboList.length; i++) {
                let peer = getCacheByKey('mailQueues', 'Exten', weiboList[i].to_peer)
                if (peer) {
                  weiboList[i].to_peer = peer.DisplayName
                }
                if (weiboList[i].robot) {
                  let robot = getCacheByKey('robotConfig', '_id', weiboList[i].robot)
                  if (robot) {
                    weiboList[i].robot = robot.robot_type
                  }
                } else {
                  weiboList[i].robot = this.$t('config.channel.noUsed')
                }
                if (weiboList[i].status === 'normal') {
                  weiboList[i].status = this.$t('config.channel.used')
                } else {
                  weiboList[i].status = this.$t('config.channel.abnormal')
                }
              }
              this.tableData = weiboList
              this.count = resp.count
            }
          })
        },
        turnPage (val) { // 翻页
          this.currentPage = val
          this.queryList()
        },
        refresh () { // 刷新
          this.queryList()
        },
        updata (val) { // 修改微博账号
          this.backPreviousStep('isShowDetail')
          let data = {'_id': val._id}
          this.$store.dispatch('queryWeiboCfgById', data).then(resp => {
            if (resp.success) {
              let weiboData = resp.data
              if (weiboData.status === 'normal') {
                weiboData.status = this.$t('config.channel.used')
              } else {
                weiboData.status = this.$t('config.channel.abnormal')
              }
              this.weiboDetail = weiboData
              this.isShowDetail = true
            } else {
              this.$message.error(resp.message)
            }
          })
        },
        deleteWeibo () { // 删除微博
          this.showDeleteWeioboModal = true
        },
        cancle () { // 点击取消按钮
          this.begin = true
          this.isShowDetail = false
        },
        //  更改欢迎语推送时机
        pushTimeChange (data) {
          if (data === 'access') {
            this.placeholderArr = [
              {
                content: this.$t('configLazyLoad.channel.nickName'),
                data: 'nickName'
              }
            ]
            let str = deepClone(this.roleForm3.welcomeMsg)
            str = str.replace(/\{agent\}/g, '')
            str = str.replace(/\{agentName\}/g, '')
            this.roleForm3.welcomeMsg = str
          } else if (data === 'claim') {
            this.placeholderArr = [
              {
                content: this.$t('configLazyLoad.channel.nickName'),
                data: 'nickName'
              }, {
                content: this.$t('configLazyLoad.channel.agent'),
                data: 'agent'
              }, {
                content: this.$t('configLazyLoad.channel.agentName'),
                data: 'agentName'
              }, {
                content: this.$t('configLazyLoad.channel.agentNickName'),
                data: 'agentNickName'
              }, {
                content: this.$t('configLazyLoad.channel.agentPhone'),
                data: 'agentPhone'
              }
            ]
          }
        },
        toChangeWeiboList (flag) {
          if (flag) {
            this.changeWeiboList = Math.random()
          }
        }
      },
      watch: {
        changeWeiboList (current) {
          if (current) {  // 添加微博成功之后，要刷新微博列表数据
            this.queryList()
          }
        }
      },
      mounted () {
        this.$store.dispatch('getCache', { type: 'robotConfig' }).then(req => {
          let robotConfig = this.$getCache('robotConfig')
          this.allrobotOptions = robotConfig || []
          this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
            if (res2 && res2.success && res2.data && res2.data.length > 0) {
              let aiRobot = res2.data
              aiRobot.forEach((item1) => {
                item1._id = item1.Id
                item1.robot_name_new = item1.Nick
              })
              this.aiRobots = aiRobot
              let configArr = []
              robotConfig.forEach((config) => {
                if (config.robot_type !== 'didi') {
                  configArr.push(config)
                }
              })
              this.allrobotOptions = configArr.concat(this.aiRobots)
            }
          })
        })
      },
      beforeMount () { // 加载组件时请求一次数据
        let p1 = this.$store.dispatch('getCache', { type: 'mailQueues' })
        let p2 = this.$store.dispatch('getCache', { type: 'robotConfig' })
        Promise.all([p1, p2]).then(([rep1, rep2]) => {
          this.queryList()
          this.peerOptions = this.$getCache('mailQueues') || []
          this.allrobotOptions = this.$getCache('robotConfig') || []
        })
      }
    }
</script>
<style lang="stylus" scoped>
    @import "../../../../../assets/common.styl"
    .box-wrap
       .step-img,.copy-img
         width 80%
         margin 26px auto
         display block
       .copy-img
         margin-top 4px
       .form1-wrap,.form2-wrap,.form3-wrap
         width 326px
         margin 15px auto 0
         text-align left
       .form3-wrap
         width 440px
         margin-top 20px
       .step2 .copy-img
         width 470px
         height 200px
       .step3 .copy-img
         width 483px
         height 218px
       .title-center
         font-size 14px
         line-height 18px
       .img-text
         color #5b74a9
         margin-top 40px
       .el-input
         width 220px
       .form-wrap
         margin-top 15px
         span
           display inline-block
           min-width 7em
           text-align left
       .step4 .form-wrap span
           min-width 10em
       .copy
          color #57cdb6
          cursor pointer
          margin-left 20px
       .before-begin
         text-align center
         margin 25px
         background #f2f6fa
         >p
           margin-bottom 34px
           font-size 14px
           line-height 18px
         .el-button
           margin-bottom 28px
         .weibo-logo
           padding 34px 0 10px 0
           display table
           margin 0 auto
           span
             display table-cell
             vertical-align middle
             margin-left 10px
             p
               line-height 1.8
               margin-left 14px
               text-align left
       .step4
         .el-textarea
           width 100%
         .el-input
           width 100%
         .form
           margin 20px 0
         .el-form-item .el-form-item__content
           text-align left
         .el-select
           width 100%
         .weiboTooltip
           position absolute
           right -25px
    .remark
      color #3b5998
      font-size 12px
      .tip
        cursor pointer
        display inline-block
        height 16px
        width 16px
        border 1px solid $c-main
        text-align center
        line-height 16px
        border-radius 50%
        margin-left 2px
        .iconfont
          font-size 10px
          color $c-main
    .placeholder_box
      margin-top 10px
      font-size 12px
      line-height:16px
      dl
        border 1px solid $c-main
        color $c-main
        border-radius 6px
        display inline-block
        padding 4px
        margin 0 10px 10px 0
        cursor pointer
      .iconfont
        font-size 12px
    .questionBox
      margin-left 8px
  .weibo_binding
    overflow hidden
    text-align center
    .weibo-table,.step5
      text-align left
  .new-config
    .weibo_binding
      overflow auto
      height calc(100vh - 54px)
    .step5
      height calc(100vh - 54px)
      overflow-y scroll
</style>
